<template>
    <div class="app-wrapper" :class="{ 'dark-mode': isDark }">
        <!-- 小屏顶部栏，替换为统一尺寸按钮 -->
        <div v-if="isMobile" class="top-bar">
            <div class="top-bar-left">
                <el-button class="icon-btn" link @click="onHamburgerClick()">
                    <el-icon :size="24">
                        <ArrowRight/>
                    </el-icon>
                </el-button>
            </div>

            <div class="top-bar-right">
                <el-tooltip :content="isDark ? '切换为浅色模式' : '切换为深色模式'" placement="bottom">
                    <el-button link @click="toggleDark()" class="icon-btn">
                        <el-icon :size="24">
                            <Moon v-if="!isDark"/>
                            <Sunny v-else/>
                        </el-icon>
                    </el-button>
                </el-tooltip>

                <el-tooltip content="退出登录" placement="bottom">
                    <el-button class="icon-btn" link @click="userLogout()">
                        <el-icon :size="24">
                            <SwitchButton/>
                        </el-icon>
                    </el-button>
                </el-tooltip>
            </div>
        </div>

        <el-container class="app-container">
            <!-- 桌面侧边栏 -->
            <el-aside
                    v-show="!isMobile"
                    :width="isCollapse ? '4rem' : '13.75rem'"
                    class="sidebar"
            >
                <SidebarContent
                        :isCollapse="isCollapse"
                        :activePath="activePath"
                        @logout="userLogout"
                        @toggle="toggleCollapse"
                />
            </el-aside>

            <!-- 移动端抽屉 -->
            <el-drawer
                    v-model="showDrawer"
                    direction="ltr"
                    size="13.75rem"
                    :with-header="false"
                    :z-index="6000"
                    :modal-class="'custom-drawer-mask'"
                    class="drawer-overlay"
            >
                <SidebarContent
                        :isCollapse="false"
                        :activePath="activePath"
                        @logout="userLogout"
                        @toggle="() => (showDrawer = false)"
                />
            </el-drawer>

            <!-- 主内容区 -->
            <el-main class="main-content">
                <!-- 大屏右上角按钮组 -->
                <div class="desktop-top-buttons">
                    <el-tooltip :content="isDark ? '切换为浅色模式' : '切换为深色模式'" placement="bottom">
                        <el-button link @click="toggleDark()" class="icon-btn">
                            <el-icon :size="24">
                                <Moon v-if="!isDark"/>
                                <Sunny v-else/>
                            </el-icon>
                        </el-button>
                    </el-tooltip>

                    <el-tooltip content="退出登录" placement="bottom">
                        <el-button link @click="userLogout()" class="icon-btn">
                            <el-icon :size="24">
                                <SwitchButton/>
                            </el-icon>
                        </el-button>
                    </el-tooltip>
                </div>

                <div class="content-wrapper">
                    <router-view/>
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup>
import {ref, onMounted, onBeforeUnmount, computed} from "vue";
import {useRoute, useRouter} from "vue-router";
import SidebarContent from "./SidebarContent.vue";
import {logout} from "@/net/index.js";
import {useDark, useToggle} from "@vueuse/core";
import {ElMessageBox} from 'element-plus'

import {
    Moon,
    Sunny,
    SwitchButton,
    ArrowRight,
} from "@element-plus/icons-vue";

const isDark = useDark();
const toggleDark = useToggle(isDark);

const isCollapse = ref(false);
const isMobile = ref(false);
const showDrawer = ref(false);

const route = useRoute();
const router = useRouter();

const menuMap = {};
router.options.routes.forEach((r) => {
    if (r.path === "/index" && r.children) {
        r.children.forEach((child) => {
            const parentPath = `/index/${child.path}`;
            menuMap[parentPath] = [parentPath];

            if (child.children) {
                child.children.forEach((sub) => {
                    menuMap[parentPath].push(`${parentPath}/${sub.path}`);
                });
            }
        });
    }
});

const activePath = computed(() => {
    const current = route.path;
    for (const [menuKey, paths] of Object.entries(menuMap)) {
        if (paths.some((p) => current.startsWith(p))) {
            return menuKey;
        }
    }
    return current;
});

function toggleCollapse() {
    isCollapse.value = !isCollapse.value;
}

function userLogout() {
    ElMessageBox.confirm(
        '确定要退出登录吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        logout(() => router.push("/"));
    }).catch(() => {
        // 用户点击取消，无需操作
    });
}

function updateIsMobile() {
    isMobile.value = window.innerWidth < 768;
}

function onHamburgerClick() {
    if (isMobile.value) {
        showDrawer.value = true;
    } else {
        toggleCollapse();
    }
}

onMounted(() => {
    updateIsMobile();
    window.addEventListener("resize", updateIsMobile);
});
onBeforeUnmount(() => {
    window.removeEventListener("resize", updateIsMobile);
});
</script>

<style scoped>
.app-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app-container {
    flex: 1;
    display: flex;
    height: 0;
}

.dark-mode {
    background-color: #121212;
    color: #eaeaea;
}

/* ---------- 新顶部栏样式 ---------- */
.top-bar {
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.dark-mode .top-bar {
    background-color: #333;
    border-color: #444;
    color: white;
}

.top-bar-left,
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* 统一顶部按钮样式 */
.icon-btn {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: inherit;
    border: none;
    transition: background 0.2s;
}

.icon-btn:hover {
    color: var(--el-color-primary);
    background-color: transparent;
}

.dark-mode .icon-btn:hover {
    background-color: transparent;
}

/* 小屏顶部栏右侧按钮组 */
.top-bar-right {
    flex-shrink: 0;
}

/* 侧边栏等保持不变 */
.sidebar {
    background-color: #f9fafc;
    border-right: 0.0625rem solid #ebeef5;
    transition: width 0.3s;
    overflow: hidden;
}

/* 主内容区背景只留这里 */
.main-content {
    background: linear-gradient(to bottom, #e8f0fb, #c7d9ff, #d7d4ff);
    padding: 1.25rem;
    overflow-y: hidden;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dark-mode .main-content {
    background: linear-gradient(to bottom, #203a63, #4a4677, #2d6e7e);
}

/* content-wrapper 只负责内容padding，不设置背景渐变 */
.content-wrapper {
    background-color: transparent;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.875rem 2.5rem 1.875rem 1.875rem;
    -webkit-overflow-scrolling: touch;
}

.content-wrapper::-webkit-scrollbar {
    width: 8px;
}

.content-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.content-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 深色模式滚动条样式 */
.dark-mode .content-wrapper::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.25);
}

.dark-mode .content-wrapper::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 大屏时主内容区右上角的按钮组，固定定位在右上角 */
.desktop-top-buttons {
    position: absolute;
    top: 1rem;
    right: 2.5rem;
    display: flex;
    gap: 0.75rem;
    z-index: 1000;
}

@media (max-width: 767px) {
    .desktop-top-buttons {
        display: none;
    }

    .content-wrapper {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .content-wrapper::-webkit-scrollbar {
        display: none;
    }
}

</style>